<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';

import { computed, markRaw, onMounted, reactive } from 'vue';

import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { queryParamsByFieldNameApi } from '#/api';
import { useAuthStore } from '#/store';

defineOptions({ name: 'Login' });

const authStore = useAuthStore();

// 登录控制参数
const loginParams = reactive({
  // 登录框标题
  title: '欢迎回来~~',
  // 登录框子标题
  subTitle: '',
  // 是否显示第三方登录
  showThirdPartyLogin: false,
  // 是否显示记住账号
  showRememberMe: false,
  // 是否显示注册按钮
  showRegister: false,
  // 是否显示二维码登录
  showQrcodeLogin: false,
  // 是否显示忘记密码
  showForgetPassword: false,
  // 是否显示验证码登录
  showCodeLogin: false,
});

onMounted(async () => {
  const result = await queryParamsByFieldNameApi({
    fieldNames:
      'loginFormTitle,loginFormSubTitle,loginShowThirdPartyLogin,loginShowRememberMe,loginShowRegister,loginShowQrcodeLogin,loginShowForgetPassword,loginShowCodeLogin',
  });
  loginParams.title = result?.loginFormTitle;
  loginParams.subTitle = result?.loginFormSubTitle;
  loginParams.showThirdPartyLogin = result?.loginShowThirdPartyLogin === '0';
  loginParams.showRememberMe = result?.loginShowRememberMe === '0';
  loginParams.showRegister = result?.loginShowRegister === '0';
  loginParams.showQrcodeLogin = result?.loginShowQrcodeLogin === '0';
  loginParams.showForgetPassword = result?.loginShowForgetPassword === '0';
  loginParams.showCodeLogin = result?.loginShowCodeLogin === '0';
});

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      defaultValue: 'super',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'VbenInputPassword',
      defaultValue: 'super@123',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: markRaw(SliderCaptcha),
      fieldName: 'captcha',
      rules: z.boolean().refine((value) => value, {
        message: $t('authentication.verifyRequiredTip'),
      }),
    },
  ];
});
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :loading="authStore.loginLoading"
    :title="loginParams.title"
    :sub-title="loginParams.subTitle"
    :show-third-party-login="loginParams.showThirdPartyLogin"
    :show-remember-me="loginParams.showRememberMe"
    :show-register="loginParams.showRegister"
    :show-qrcode-login="loginParams.showQrcodeLogin"
    :show-forget-password="loginParams.showForgetPassword"
    :show-code-login="loginParams.showCodeLogin"
    @submit="authStore.authLogin"
  />
</template>
